<template>
  <div class="flex align-center justify-center flex-1 w-100 steps-bar">
    <div
      v-for="(item, index) in steps"
      :key="index"
      class="flex align-center steps-item"
      :class="{ 'flex-1': index !== steps.length - 1, active: index < current }"
    >
      <div class="steps-index">{{ index + 1 }}</div>
      <div class="steps-content">{{ $t(item) }}</div>
      <div v-if="index !== steps.length - 1" class="steps-line" />
    </div>
  </div>
</template>
<script>
  export default {
    name: 'StepsBar',
    props: {
      steps: {
        required: true,
        type: Array,
        default: () => []
      },
      current: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {}
    },
    methods: {}
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/css/mixin.module.scss';
  .steps-bar {
    .steps-item {
      max-width: 200px;
    }
    .steps-index {
      flex: none;
      margin: 0 5px;
      width: 30px;
      height: 30px;
      font-size: 18px;
      line-height: 26px;
      text-align: center;
      border-radius: 50%;
      @include themeify {
        color: themed('stepNumColor');
        background: themed('stepBgColor');
        border: 2px solid themed('stepBorderColor');
      }
    }
    .steps-content {
      flex: none;
      margin-right: 2px;
      font-size: 14px;
      @include themeify {
        color: themed('stepTextColor');
      }
    }
    .steps-line {
      width: 100%;
      @include themeify {
        border-top: 1px solid themed('stepLineColor');
      }
    }

    .active {
      .steps-index {
        @include themeify {
          color: themed('stepActiveNumColor');
          background: themed('stepActiveBgColor');
          border: 2px solid themed('stepActiveBorderColor');
        }
      }
      .steps-content {
        @include themeify {
          color: themed('stepActiveTextColor');
        }
      }
      .steps-line {
        @include themeify {
          background: themed('stepActiveLineColor');
        }
      }
    }
  }
</style>
